@()(implicit session: Session)
@config.main("KEGG Enrichment") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("KEGG Enrichment",detail = "KEGG Enrichment Analysis  is often used to study gene function and screen key genes in differential gene sets. Generally, after obtaining the target gene set, it is necessary to analyze which pathways these genes participate in, what functions they have, and which pathways may play a leading role in the change of phenotype.")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">

                      @components.species("3")

                        @components.textarea("Enter gene id", "id", "id", "getExample()",placeholder="Paste GeneID(s) here.")

                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                            Run</button>
                    </div>
                </form>

                <div id="result"  style="display: none;">
                    <hr>
                    <h5 class="result-title">Result:</h5>

                    <ul class="nav nav-tabs px-4" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="rTable-tab" data-toggle="tab" href="#ul-rTable" role="tab"
                            aria-controls="ul-rTable" aria-selected="true">KEGG Table</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="img-tab" data-toggle="tab" href="#ul-img" role="tab"
                            aria-controls="ul-img" aria-selected="true">KEGG Enrich Image</a>
                        </li>
                    </ul>

                    <div class="tab-content py-0 px-0">
                        <div class="tab-pane fade show active" id="ul-rTable" role="tabpanel"
                        aria-labelledby="rTable-tab" style="width: 100%">
                            <table class="table table-bordered table-all" id="table" data-pagination="true"
                            data-page-list="[10, 25, 50, 100, all]" data-advanced-sortable="true"
                            data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all">
                            </table>
                        </div>

                        <div class="tab-pane fade" id="ul-img" role="tabpanel"
                        aria-labelledby="img-tab">
                            <div style="display: flex">
                                <img id="img1" style="width: 50%"/>
                                <img id="img2" style="width: 50%"/>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <script>

            $(function () {
                formValidation();
                $("#table").bootstrapTable({
                    columns: [
                        {
                            field: "0",
                            title: "Layer1",
                            sortable: "true",
                            searchType: "text"
                        }, {
                            field: "1",
                            title: "Layer2",
                            sortable: "true",
                            searchType: "text"
                        }, {
                            field: "2",
                            title: "Layer3",
                            sortable: "true",
                            searchType: "text"

                        }, {
                            field: "3",
                            title: "ID",
                            sortable: "true",
                            searchType: "text",
                            formatter: function (value, row) {
                                return `<a href="${row["9"]}" target="_blank">${value}</a>`
                            }
                        }, {
                            field: "4",
                            title: "Input number",
                            sortable: "true",
                            searchType: "text",
                        },
                        {
                            field: "5",
                            title: "Background number",
                            sortable: "true",
                            searchType: "text",
                        },
                        {
                            field: "6",
                            title: "P-Value",
                            sortable: "true",
                            searchType: "text",
                        },
                        {
                            field: "7",
                            title: "FDR",
                            sortable: "true",
                            searchType: "text"
                        },
                        {
                            field: "8",
                            title: "Input",
                            sortable: "true",
                            searchType: "text",
                            formatter: function (value) {
                                let genes = []
                                value.split("|").forEach(v => {
                                    genes.push(`<a href="/COADB/browse/genePage/${v}" target="_blank">${v}</a>`)
                                })
                                return genes
                            }
                        }
                    ]
                })

            })

            function Search() {

                let form = $("#form");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();

                    $.ajax({
                        url: "@routes.ToolsController.toolsRun("kegg")",
                        type: "post",
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        data: new FormData($("#form")[0]),
                        success: function (data) {
                            if (data.valid === "false") {
                                swal("Error", data.msg, "error");
                            } else {
                                let $table = $(`#table`)
                                $table.bootstrapTable("load", data.table)
                               $("#img1").attr("src", "data:image/png;base64," + data.img1);
                               $("#img2").attr("src", "data:image/png;base64," + data.img2);
                                const $result = $("#result");
                                $result.show()
                                let target_top = $result.offset().top - 80;
                                $("html,body").animate({scrollTop: target_top}, 800);
                            }
                            layer.close(index)
                        }
                    });
                }
            }

            function getExample() {
                let species = $("#species").val()
                $.post("/COADB/example/getGeneIdsExample/" +species,(data)=>{
                    $(`#id`).val(data)
                })
            }

            function formValidation() {
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        id: {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                }
                            }
                        }
                    }
                });
            }



    </script>
}